<template>
  <div class="map">
    <el-input
      style="width: 100%"
      id="search"
      class="form-control input-style"
      type="text"
      placeholder="请输入搜索地址"
      prefix-icon="el-icon-search"
      v-model="MapAdress"
    >
      <template #append>
        <el-button id="search_btn">搜索</el-button>
      </template>
    </el-input>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: " ",
      MapAdress: "",
    };
  },
  mounted() {
    AMapLoader.load({
      key: "e43960ccccbcb46557f5b803cbadbe37", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        "AMap.Scale",
        "AMap.ToolBar",
        "AMap.ControlBar",
        "AMap.MouseTool",
        "AMap.MapType",
        "AMap.HawkEye",
        "AMap.PlaceSearch",
      ], // 需要使用
      AMapUI: {
        version: "1.1",
        plugins: ["overlay/SimpleMarker", "overlay/SimpleInfoWindow"],
      },
      Loca: {
        // 是否加载 Loca， 缺省不加载
        version: "1.3.2", // Loca 版本，缺省 1.3.2
      },
    })
      .then((AMap) => {
        this.map = new AMap.Map(document.getElementById("container"), {
          zoom: 11, //级别
          center: [116.467232, 39.467232], //中心点坐标
          viewMode: "3D",
          pitch: 34,
          //使用3D视图
          resizeEnable: true,
        });
        this.map.addControl(new AMap.Scale()); // 添加左下角的比例尺
        let toolBar = new AMap.ToolBar({
          position: { 
            right: "35px",
          },
        });
        let controlBar = new AMap.ControlBar({
          position: {
            bottom: "230px",
            right: "5px",
            height:'100px'
          },
        });
 
        this.map.addControl(toolBar); // 添加右下角的放大缩小
        this.map.addControl(controlBar); // 方向盘 
        this.map.addControl(new AMap.MapType()); // 添加右上角的标准图和卫星图  和路况
        this.map.addControl(new AMap.HawkEye()); // 添加地图放大镜
      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 96%;
  overflow: hidden;
}
#container {
  width: 84vw;
  margin-top: 10px;
  height: 96vh;
}
</style>
